<!--  -->
<template>
  <div class="showDataPanel">
    <el-table class="realTableView" :data="dataList" row-key="deviceId">
      <el-table-column prop="rangeName" label="区域名称" align="center" :render-header="renderHeader"/>
      <el-table-column prop="deviceName" label="设备名称" align="center" :render-header="renderHeader"/>
      <el-table-column prop="deviceNo" label="设备编号" align="center" :render-header="renderHeader"/>
      <el-table-column label="采集时间" prop="dataTime" width="90" :render-header="renderHeader"/>
      <el-table-column label="制热运行时间" align="center">
        <el-table-column label="高档" align="center">
          <el-table-column prop="heatingHighSettingAccumulated" label="累计值" align="center" :render-header="renderHeader"/>
          <el-table-column prop="heatingHighSettingConsumption" label="使用量" align="center" :render-header="renderHeader"/>
        </el-table-column>
        <el-table-column label="中档" align="center">
          <el-table-column prop="heatingMediumSettingAccumulated" label="累计值" align="center" :render-header="renderHeader"/>
          <el-table-column prop="heatingMediumSettingConsumption" label="使用量" align="center" :render-header="renderHeader"/>
        </el-table-column>
        <el-table-column label="低档" align="center">
          <el-table-column prop="heatingLowSettingAccumulated" label="累计值" align="center" :render-header="renderHeader"/>
          <el-table-column prop="heatingLowSettingConsumption" label="使用量" align="center" :render-header="renderHeader"/>
        </el-table-column>
      </el-table-column>
      <el-table-column label="制冷运行时间" align="center">
        <el-table-column label="高档" align="center">
          <el-table-column prop="coolingHighSettingAccumulated" label="累计值" align="center" :render-header="renderHeader"/>
          <el-table-column prop="coolingHighSettingConsumption" label="使用量" align="center" :render-header="renderHeader"/>
        </el-table-column>
        <el-table-column label="中档" align="center">
          <el-table-column prop="coolingMediumSettingAccumulated" label="累计值" align="center" :render-header="renderHeader"/>
          <el-table-column prop="coolingMediumSettingConsumption" label="使用量" align="center" :render-header="renderHeader"/>
        </el-table-column>
        <el-table-column label="低档" align="center">
          <el-table-column prop="coolingLowSettingAccumulated" label="累计值" align="center" :render-header="renderHeader"/>
          <el-table-column prop="coolingLowSettingConsumption" label="使用量" align="center" :render-header="renderHeader"/>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="presetTemperature" label="设定温度℃" align="center" :render-header="renderHeader"/>
      <el-table-column prop="indoorTemperature" label="室内温度℃" align="center" :render-header="renderHeader"/>
      <el-table-column prop="onOffState" label="开关状态" align="center" :render-header="renderHeader"/>
      <el-table-column prop="powerMode" label="模式" align="center" :render-header="renderHeader"/>
      <el-table-column prop="airflowMode" label="风机模式" align="center" :render-header="renderHeader"/>
    </el-table>
  </div>
</template>

<script>

import {h} from "vue";

let component;
import moment from 'moment';

export default {
  watch:{
    async deviceNoList() {
      let response = await component.$asyncPost("data", {
        actionType: "realTimeData",
        deviceInfoList: component.deviceInfoList,
        type:"temperature"
      });
      if(response.success){
        component.dataList = response.dataList;
      }

    }
  },
  data() {
    return {
      deviceInfoList: [],
      deviceNoList: [],
      dataList:[],
      queryParams: {
        dateRange: [moment().subtract(1, 'days'), moment()],
        dateType: 'month'
      }
    };
  },
  methods: {
    renderHeader({column}) {
      let realWidth = 0;
      let span = document.createElement('span');

      span.innerText = column.label;
      document.body.appendChild(span);

      realWidth = span.getBoundingClientRect().width;
      column.minWidth = realWidth + 40; // 可能还有边距/边框等值，需要根据实际情况加上

      document.body.removeChild(span);
      return h('span', column.label);
    },
    getData(data,type) {
      this.queryParams.dateRange = data;
      this.queryParams.dateType=type;
      this.$emit('getData');
    }
  },
  mounted() {
    component = this;
  }
}

</script>
<style lang='scss'>
.test1 {
}
</style>